<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./img/tx1.jpg" type="image/x-icon">
    <!-- <link rel='stylesheet' href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'> -->
    <link rel="stylesheet" href="./css/style_2.css">
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/wow.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>

    </style>
    <title>知否</title>
</head>

<body>

    <!-- 导航 -->
    <header class="header" id="header">
        <nav class="navbar container">
            <section class="navbar-left">
                <a href="#" class="brand">知否</a>
                <div class="burger" id="burger">
                    <span class="burger-line"></span>
                    <span class="burger-line"></span>
                    <span class="burger-line"></span>
                </div>
            </section>
            <section class="navbar-center">
                <span class="overlay"></span>
                <div class="menu" id="menu">
                    <div class="menu-header">
                        <span class="menu-arrow"><i class="bx bx-chevron-left layui-icon layui-icon-left"></i></span>
                        <span class="menu-title"></span>
                    </div>
                    <ul class="menu-inner">
                        <li class="menu-item"><a href="./front.html" class="menu-link">WEB前端</a></li>
                        <li class="menu-item menu-dropdown">
                            <span class="menu-link">WEB后端<i class="bx bx-chevron-right layui-icon layui-icon-down"></i></span>
                            <div class="submenu megamenu megamenu-column-1">
                                <ul class="submenu-list">
                                    <li class="submenu-item"><a href="#" class="submenu-link">Python</a></li>
                                    <li class="submenu-item"><a href="./php.html" class="submenu-link">PHP</a></li>
                                    <li class="submenu-item"><a href="#" class="submenu-link">C语言</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="menu-item"><a href="#" class="menu-link">网络技术</a></li>
                        <li class="menu-item"><a href="#" class="menu-link">运维技术</a></li>
                        <li class="menu-item menu-dropdown">
                            <span class="menu-link">知识碎片<i class="bx bx-chevron-right layui-icon layui-icon-down"></i></span>
                            <div class="submenu megamenu megamenu-column-4">
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Men</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://www.worldhello.net/gotgithub/" class="submenu-link" target="_blank">GitHub指南</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/14YbCKdUPA3412vJ_TYUEew" class="submenu-link" target="_blank">软考系统集成</a></li>
                                        <li class="submenu-item"><a href="https://gitee.com/Topmost/learning-notes.git" class="submenu-link" target="_blank">Web文档</a></li>
                                        <li class="submenu-item"><a href="https://gitee.com/Topmost/web-study.git" class="submenu-link" target="_blank">前端文档</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Kids</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="http://www.webqdkf.com/" class="submenu-link" target="_blank">前端导航</a></li>
                                        <li class="submenu-item"><a href="https://www.nuomiphp.com/" class="submenu-link" target="_blank">PHP论坛</a></li>
                                        <li class="submenu-item"><a href="https://github.com/jackfrued/Python-100-Days" class="submenu-link" target="_blank">Python路线</a></li>
                                        <li class="submenu-item"><a href="https://gitee.com/Topmost/web-front-end" class="submenu-link" target="_blank">Web前端</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://gitee.com/Topmost/front-end-information.git" class="submenu-link" target="_blank">前端资料</a></li>
                                        <li class="submenu-item"><a href="./document/github.html" class="submenu-link" target="_blank">Git & GitHub</a></li>
                                        <li class="submenu-item"><a href="./document/web.html" class="submenu-link" target="_blank">Web前端</a></li>
                                        <li class="submenu-item"><a href="./document/python.html" class="submenu-link" target="_blank">Python</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="./document/linux.html" class="submenu-link" target="_blank">Linux</a></li>
                                        <li class="submenu-item"><a href="https://yun.itheima.com/subject/webmap/index.html?gzh" class="submenu-link" target="_blank">前端自学路线</a></li>
                                        <li class="submenu-item"><a href="https://www.h3c.com/cn/" class="submenu-link" target="_blank">H3C</a></li>
                                        <li class="submenu-item"><a href="https://www.linuxprobe.com/" class="submenu-link" target="_blank">Linu就该这么学</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://www.vjshi.com/" class="submenu-link" target="_blank">光厂</a></li>
                                        <li class="submenu-item"><a href="https://www.oldboyedu.com/" class="submenu-link" target="_blank">老男孩教育</a></li>
                                        <li class="submenu-item"><a href="https://oioweb.cn/" class="submenu-link" target="_blank">教书先生API</a></li>
                                        <li class="submenu-item"><a href="https://free-api.com/" class="submenu-link" target="_blank">API接口大全</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://api.uomg.com/" class="submenu-link" target="_blank">UomgAPI</a></li>
                                        <li class="submenu-item"><a href="https://www.jisuapi.com/api/?isfree=1" class="submenu-link" target="_blank">极速数据</a></li>
                                        <li class="submenu-item"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" class="submenu-link" target="_blank">黑马优购</a></li>
                                        <li class="submenu-item"><a href="https://devv.ai/zh" class="submenu-link" target="_blank">Devv</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="http://www.webqdkf.com/" class="submenu-link" target="_blank">Web前端开发</a></li>
                                        <li class="submenu-item"><a href="https://spacexcode.com/" class="submenu-link" target="_blank">太空编程</a></li>
                                        <li class="submenu-item"><a href="https://i-fanr.com/" class="submenu-link" target="_blank">前端开发笔记</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <!-- <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li>
                                        <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li>
                                        <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li>
                                        <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li> -->
                                    </ul>
                                </div>

                            </div>
                        </li>
                        <li class="menu-item menu-dropdown">
                            <span class="menu-link">资料分享<i class="bx bx-chevron-right layui-icon layui-icon-down"></i></span>
                            <div class="submenu megamenu megamenu-column-4">
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Men</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://ai-bot.cn/" data-password="password2">AI工具</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat.redtom.com/chat" data-password="password2">AI聊天</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat-shared3.zhile.io/shared.html" data-password="password1">ChatGPT3.5</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://github.com/LiLittleCat/awesome-free-chatgpt" data-password="password1">ChatGPT链接</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Kids</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat2.aichatos.com/#/chat/1703037521427" data-password="password1">ChatGPT(国内)</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat2doc.cn/" data-password="password1">Chat2Doc</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://yiyan.baidu.com/" data-password="password1">文心一言</a></li>
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat6.aichatos.com/#/chat/1699942849518" data-password="password1">AIchatos</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://chat1.geekgpt.org/" data-password="password1">ChatGPT</a></li>
                                        <li class="submenu-item"><a href="https://www.u.tools/" class="submenu-link" target="_blank">UTools效率工具</a></li>
                                        <li class="submenu-item"><a href="https://www.chaojimake.cn/" class="submenu-link" target="_blank">面试题网站</a></li>
                                        <li class="submenu-item"><a href="https://tuostudy.upnb.top/" class="submenu-link" target="_blank">图欧学习导航</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://www.tkevo.com/" class="submenu-link" target="_blank">TK运营导航</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ" class="submenu-link" target="_blank">网络资料</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg" class="submenu-link" target="_blank">Linun镜像</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1EhMjxU2wRXwBR1cSiYLcRg" class="submenu-link" target="_blank">Web开发电子书</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g" class="submenu-link" target="_blank">心理学书籍</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg" class="submenu-link" target="_blank">摄影教程</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew" class="submenu-link" target="_blank">激活工具</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q" class="submenu-link" target="_blank">office软件</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA" class="submenu-link" target="_blank">TCP/IP协议</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q" class="submenu-link" target="_blank">计算机维修教程</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg" class="submenu-link" target="_blank">英语资料</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg" class="submenu-link" target="_blank">简历模板</a></li>
                                    </ul>
                                </div>
                                <div class="submenu-inner">
                                    <!-- <h4 class="submenu-title">Women</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A" class="submenu-link" target="_blank">教师资格证资料</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ" class="submenu-link" target="_blank">网络工程实战</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ" class="submenu-link" target="_blank">弱点安防资料</a></li>
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q" class="submenu-link" target="_blank">Adebe软件</a></li>
                                    </ul>
                                    <!-- <h4 class="submenu-title">Beauty</h4> -->
                                    <ul class="submenu-list">
                                        <li class="submenu-item"><a href="https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ" class="submenu-link" target="_blank">PPT模板</a></li>
                                        <!-- <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li>
                                        <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li>
                                        <li class="submenu-item"><a href="#" class="submenu-link" target="_blank">Product Name</a></li> -->
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <!-- <li class="menu-item menu-dropdown">
                            <span class="menu-link">New Arrival<i class="bx bx-chevron-right"></i></span>
                            <div class="submenu megamenu megamenu-column-4">
                                <div class="submenu-inner">
                                    <a href="#" class="submenu-link">
                                        <img src="https://i.ibb.co/kgNX8ks/Product-2.jpg" class="submenu-image" alt="Product">
                                        <span class="submenu-title">Product Name</span>
                                    </a>
                                </div>
                                <div class="submenu-inner">
                                    <a href="#" class="submenu-link">
                                        <img src="https://i.ibb.co/ZTD2wF6/Product-3.jpg" class="submenu-image" alt="Product">
                                        <span class="submenu-title">Product Name</span>
                                    </a>
                                </div>
                                <div class="submenu-inner">
                                    <a href="#" class="submenu-link">
                                        <img src="https://i.ibb.co/prb0Vz9/Product-4.jpg" class="submenu-image" alt="Product">
                                        <span class="submenu-title">Product Name</span>
                                    </a>
                                </div>
                                <div class="submenu-inner">
                                    <a href="#" class="submenu-link">
                                        <img src="https://i.ibb.co/zPJm9jy/Product-5.jpg" class="submenu-image" alt="Product">
                                        <span class="submenu-title">Product Name</span>
                                    </a>
                                </div>
                            </div>
                        </li> -->
                        <!-- <li class="menu-item menu-dropdown">
                            <span class="menu-link">资料分享<i class="bx bx-chevron-right"></i></span>
                            <div class="submenu megamenu megamenu-column-1">
                                <ul class="submenu-list">
                                    <li class="submenu-item"><a href="#" class="submenu-link">Login</a></li>
                                    <li class="submenu-item"><a href="#" class="submenu-link">Register</a></li>
                                    <li class="submenu-item"><a href="#" class="submenu-link">Track Order</a></li>
                                    <li class="submenu-item"><a href="#" class="submenu-link">Help</a></li>
                                </ul>
                            </div>
                        </li> -->
                        <li class="menu-item"><a href="https://free.3v.do/gbook/index.asp?username=fxl" target="_blank" class="menu-link">留言</a></li>
                    </ul>
                </div>
            </section>
            <section class="navbar-right" onclick="toggleBackgroundColor()">
                <button class="switch" id="switch">
            <span class="switch-light"><i class="bx bx-sun layui-icon layui-icon-light a"></i></span>
            <span class="switch-dark"><i class="bx bx-moon layui-icon layui-icon-moon a"></i></span>
         </button>
            </section>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div class="banner">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/banner1.jpg" alt="" width="100%">
                </div>
                <div class="swiper-slide">
                    <img src="./img/banner2.jpg" alt="" width="100%">
                </div>
            </div>
        </div>
    </div>

    <!-- 中间内容 -->
    <div class="center box">
        <!-- <div class="color-change-element day-mode ">Click to Toggle Color</div> -->
        <!-- 左边 -->
        <div class="layui-col-lg3 layui-col-md3">
            <div class="main-left">
                <div class="main-left-top color-change-element day-mode">
                    <div class="portrait wow fadeInDown">
                        <img src="./img/logo.jpg" alt="">
                    </div>
                    <div class="portrait-font wow fadeInDown">
                        <p>Topmost</p>
                        <p>一个专注技术教程的订阅站</p>
                    </div>
                    <div class="portrait-icon wow fadeInDown">
                        <a class="layui-icon layui-icon-home" href="./index.html"></a>
                        <a class="layui-icon layui-icon-login-wechat" onmouseover="showQRCode()" onmouseout="hideQRCode()"></a>
                        <a href="https://weibo.com/u/3289619551" target="_blank" class="layui-icon layui-icon-login-weibo"></a>
                    </div>
                    <!-- 显示二维码的容器 -->
                    <div id="qrcode-container">
                        <img id="qrcode-image" src="./img/ewm.jpg" alt="二维码">
                    </div>
                </div>
                <div class="main-left-bottom">
                    <ul>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/html.html" target="_blank">HTML</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/css.html" target="_blank">CSS</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/Javascript.html" target="_blank">JavaScript</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/es6.html" target="_blank">ECMAScript6</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/ts.html" target="_blank">TypeScript</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/git.html" target="_blank">Git</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/react.html" target="_blank">React.js</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/vue.html" target="_blank">Vue.js</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/node.html" target="_blank">Node.js</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="./document/xiaochengxu.html" target="_blank">小程序开发</a></li>
                        <li class="color-change-element day-mode wow fadeInDown"><a href="#" target="_blank">公众号开发</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 中间 -->
        <div class="layui-col-lg6 layui-col-md6">
            <div class="main-center">
                <div class="main-icon">
                    <i class="layui-icon layui-icon-link"></i>
                    <i>导航链接</i>
                </div>

                <!-- 分页 -->
                <div class="page-content">
                    <div class="page" data-page="1">
                        <!-- 第一页内容 -->
                        <ul>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="100ms"><a href="https://f2e.tech/?spm=a21iq3.home.0.0.33632764LDFLoU" target="_blank">前端知识图谱</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="200ms"><a href="https://cn-vuejs-challenges.netlify.app/" target="_blank">Vue.js在线挑战</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="300ms"><a href="https://gitee.com/Topmost/diagram-front-end.git" target="_blank">图解前端</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="400ms"><a href="https://developer.mozilla.org/zh-CN/" target="_blank">Mozilla 开发者网络</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="500ms"><a href="https://www.yuque.com/u21437924/py0pw3" target="_blank">前端报错总结</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="600ms"><a href="./document/vuejs.html" target="_blank">vue笔记</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="700ms"><a href="./document/nodejs.html" target="_blank">Node环境搭建</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="800ms"><a href="./document/buju.html" target="_blank">页面布局</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="900ms"><a href="./document/jquery.html" target="_blank">jQuery</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1000ms"><a href="./document/grid.html" target="_blank">Grid布局</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1100ms"><a href="./document/flex.html" target="_blank">Flex布局</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1200ms"><a href="./document/less.html" target="_blank">Less常用语法</a></li>
                        </ul>
                    </div>

                    <div class="page" data-page="2">
                        <ul>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="100ms"><a href="./document/luxian.html" target="_blank">前端学习路线</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="200ms"><a href="./document/canvas.html" target="_blank">canvas</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="300ms"><a href="./document/js.html" target="_blank">JavaScript笔记文档</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="400ms"><a href="./document/api.html" target="_blank">API接口</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="500ms"><a href="./document/xiangyingshi.html" target="_blank">响应式设计详解</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="600ms"><a href="https://cssgrid-generator.netlify.app/" target="_blank">Grid 布局生成器</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="700ms"><a href="https://grid.layoutit.com/" target="_blank">在线Grid 布局</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="800ms"><a href="https://qishaoxuan.github.io/css_tricks/" target="_blank">Tricks</a></li>
                            <!--<li class="color-change-element day-mode wow fadeInDown" data-wow-delay="900ms"><a href="" target="_blank">123</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1000ms"><a href="" target="_blank">123</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1100ms"><a href="" target="_blank">123</a></li>
                            <li class="color-change-element day-mode wow fadeInDown" data-wow-delay="1200ms"><a href="" target="_blank">123</a></li> -->
                        </ul>
                    </div>

                    <div class="page" data-page="3">
                        <!-- 第三页内容 -->
                        3
                    </div>
                </div>
                <div class="pagination">
                    <button class="page-btn active wow fadeInDown" data-wow-delay="100ms" data-page="1">1</button>
                    <button class="page-btn wow fadeInDown" data-wow-delay="200ms" data-page="2">2</button>
                    <!-- <button class="page-btn wow fadeInDown" data-wow-delay="300ms" data-page="3">3</button> -->
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="layui-col-lg3 layui-col-md3">
            <div class="main-right">
                <div class="information color-change-element day-mode">
                    <div class="picture wow fadeInDown">
                        <img src="./img/img.jpg" alt="">
                    </div>
                    <div class="public wow fadeInDown">关注微信公众号</div>
                    <div class="annotation">
                        <p class="wow fadeInDown">→「技术干货」每日推送</p>
                        <p class="wow fadeInDown">→「免费资料」随时领取</p>
                        <p class="wow fadeInDown">→「更多文章」等你来看</p>
                    </div>
                </div>

                <div class="tally color-change-element day-mode">
                    <div class="tally-icon">
                        <i class="layui-icon layui-icon-note"></i>
                        <i>标签</i>
                    </div>

                    <div id="page1" class="page1 active">
                        <span class="wow fadeInDown myElement"><a href="https://cn.vuejs.org/" target="_blank">vue.js</a></span>
                        <span class="wow fadeInDown myElement"><a href="https://less.nodejs.cn/" target="_blank">less.js</a></span>
                        <span class="wow fadeInDown myElement"><a href="https://vue-js.com/learn-vue/" target="_blank">剖析 Vue.js 源码</a></span>
                        <span class="wow fadeInDown myElement"><a href="http://www.bootstrapmb.com/" target="_blank">Bootstrap模板</a></span>
                        <span class="wow fadeInDown myElement"><a href="https://jquery.cuishifeng.cn/" target="_blank">jQuery API</a></span>
                        <span class="wow fadeInDown myElement"><a href="https://www.jq22.com/" target="_blank">jQuery插件</a></span>
                        <span class="wow fadeInDown myElement"><a href="https://www.jc2182.com/" target="_blank">蝴蝶教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.swiper.com.cn/">Swiper</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.runoob.com/">菜鸟教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.w3school.com.cn/">W3School</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://echarts.apache.org/zh/index.html">ECharts</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://webjike.com/web.html">前端导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://yun.itheima.com/?hm">黑马程序员</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.gulixueyuan.com/">谷粒学范</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.atguigu.com/">尚硅谷</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.yuque.com/cessstudy/kak11d">前端基础</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.jquery123.com/">jQuery API 中文文档</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.worldhello.net/gotgithub/">Git权威指南</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://vitejs.cn/">Vite.js</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/API">Web API 接口参考</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://ts.xcatliu.com/introduction/get-typescript.html">TypeScript入门教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.yuque.com/geekap/qes0iw">前端文档</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.webgl3d.cn/">Three.js教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.lanqiao.cn/courses/">蓝桥云课</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.yanhuangxueyuan.com/">WebGL</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://caibaojian.com/vuepress/">VuePress中文网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://web.qianguyihao.com/">千古前端</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.itxst.com/">IT小书童</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://chokcoco.github.io/#blog">Coco s blog</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API">Canvas WebAPI接口</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.leaferjs.com/ui/">Leafer UI</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://dev.dcloud.net.cn/mui/">MUI</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.openzui.com/#/">ZUI</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://element.eleme.cn/#/zh-CN">Element UI</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://layui.dev/">Layui</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://vant-ui.github.io/vant/#/zh-CN/">Vant</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.maliquankai.com/">码力全开</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.shuxiangjia.cn/?cate=3">PDF电子书</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.diyijc.com/">中小学教程网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://moocs.unipus.cn/">高校外语慕课平台</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.bcnav.cn/">编程学习</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.17sucai.com/">17素材网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.cnblogs.com/">博客园</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.xiaobaipan.com/">小白盘</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.howzhi.com/">好知网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.bookstack.cn/">书栈网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.code-nav.cn/">编程导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.shouce.ren/">手册网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://kuangyx.cn/">web技术学习</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.coderutil.com/">程序员盒子</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.1024nav.com/">前端面经</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://css.doyoe.com/">CSS参考手册</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://animxyz.com/">Animxyz</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://htmlcheatsheet.com/">HTML CheatSheet</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.w3schools.com/">Learn to Code</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://zh.learnlayout.com/">CSS布局</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.500d.me/">五百丁简历</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.wdlinux.cn/bbs/thread-64366-1-1.html">WDlinux</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.bootcss.com/">Bootstrap</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.nowcoder.com/">牛客</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://aieditor.dev/">AiEditor</a></span>
                        <div class="btn1 wow fadeInDown">
                            <button onclick="switchPage('page2')">»</button>
                        </div>
                    </div>

                    <div id="page2" class="page1">
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.xiaohuochai.cc/">前端小站</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.dowebok.com/">dowebok</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.dowebok.com/demo/2014/98/">Animate.css</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.dowebok.com/131.html">wow.js</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://case.wdwangke.com/">项目案例</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.cxy521.com/">cxy521</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.kancloud.cn/qnit/standard-front-high-level-v1/744325">看云</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://developer.mozilla.org/en-US/">MDN Web Docs</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.lmonkey.com/">学习猿地</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://doc.houdunren.com/">后盾人</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://imooc.gaoxiaobang.com/">高校邦</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.zygx8.com/">资源共享吧</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.helloworld.net/html2md">helloworld</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.zhangxinxu.com/">鑫空间</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://msdn.itellyou.cn/">MSDN</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.yiibai.com/">易百教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://apifox.com/">Apifox</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://r2coding.com/#/README">Road To Coding</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://kaifa.baidu.com/">开发者搜索</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://tool.oschina.net/">OSCHINA</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://ihateregex.io/">正则表达式</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://nav.poetries.top/">前端导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.voidcc.com/">开发小院</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://cdn.baomitu.com/">CND</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://kuangyx.cn/">web技术学习</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://zh.javascript.info/">现代 JavaScript 教程</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.pdfpai.com/">PDF派</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.python100.com/">Python100</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.php.cn/">PHP中文网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://easywechat.com/">EasyWeChat</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.workerman.net/">workerman</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.bianchenglianmeng.cn/index">编程联盟</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.nuomiphp.com/">nuomiphp</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.fastadmin.net/">FastAdmin</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.wenjiangs.com/doc/gwg4qmpegy">文档</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.zhanlian.net/">站联导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://stackblitz.com/">stackblitz</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://sso.qiniu.com/">七牛云</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.showdoc.com.cn/">ShowDoc</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.easemob.com/">环信</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.voidcc.com/">开发小院</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://linuxtools-rst.readthedocs.io/zh_CN/latest/#">Linux工具</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://linux.vbird.org/linux_server/centos6/0130internet_connect.php">鸟哥Linux</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://billie66.github.io/TLCL/">TLCL</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://linux.cn/">linux社区</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.178linux.com/">linux运维</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.linuxcool.com/">linux命令大全</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.lxlinux.net/">良许linux</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.dedecms.com/">织梦</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.misuland.com/#zb">米鼠网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://edu.51cto.com/">51CTO学堂</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.lintcode.com/">炼码</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://leetcode.cn/leetbook/">力扣</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.acmcoder.com/#/practice/company">赛码</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.jb51.cc/">编程之家</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://16map.com/">设计导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="http://www.ixinqing.com/">心晴网</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://chrome.zzzmh.cn/#/index">极简插件</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.chengzz.com/">城哥博客</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://gradient.shapefactory.co/">渐变</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://lingdaima.com/shadow/">阴影</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.uidesigndaily.com/">网站配色</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://smalldev.tools/">工具合集</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://glassgenerator.netlify.app/">css玻璃</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://bgjar.com/sprinkle">背景生成</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.dcloud.io/">uniapp</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://9elements.github.io/fancy-border-radius/#44.61.55.42--306.306">圆角</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://he3app.com/zh/">He3开发工具</a></span>
                        <span class="wow fadeInDown myElement"><a href="javascript:void(0);" class="protected-link submenu-link" data-link="https://topmost.gitee.io/book/" data-password="password2" style="padding: 0;">最新文档</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://ai-zhan.com/">AI导航</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://huluwaai.com/">葫芦娃AI</a></span>
                        <span class="wow fadeInDown myElement"><a target="_blank" href="https://www.ruanyifeng.com/home.html">阮一峰博客</a></span>
                        <div class="btn1 wow fadeInDown">
                            <button onclick="switchPage('page1')">«</button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer color-change-element day-mode">
        <div class="footer-font">
            <p class="wow fadeInDown">Copyright © 2021 - 2022 知否</p>
            <p class="wow fadeInDown">如有侵权请联系删除</p>
            <p class="wow fadeInDown">粤ICP备13202516号</p>
        </div>
        <p class="wow fadeInDown" style="text-align: center;margin-top: 10px;">您第 <span id="visitCount">0</span> 次访问本网站！</p>
        <div class="footer-img wow fadeInDown">
            <img src="./img/img.jpg" alt="">
        </div>
    </div>


</body>
<script src="./js/script_1.js"></script>
<script src="./js/layui.js"></script>
<script src="./js/wow.js"></script>
<script src="./js/loop.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="./js/swiper-bundle.min.js"></script>
<script>
    // 初始化wow.js
    new WOW().init();
    layui.use(['layer'], function() {
        var layer = layui.layer;

        var links = document.getElementsByClassName('protected-link');
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function() {
                var link = this.getAttribute('data-link');
                showPasswordPrompt(link);
            };
        }

        function showPasswordPrompt(link) {
            var correctPassword = 'topmost.';

            layer.prompt({
                title: '请输入密码',
                formType: 1,
                closeBtn: 0
            }, function(value, index, elem) {
                if (value === correctPassword) {
                    layer.close(index);
                    window.location.href = link;
                } else {
                    layer.msg('密码错误，请重新输入');
                }
            });
        }
    });

    // 轮播图
    var mySwiper = new Swiper('.swiper', {
        effect: 'fade',
        direction: 'horizontal',
        loop: true,
        // mousewheel: true,
        keyboard: true,
        autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true,

        },

    })
</script>

</html>